ரியாக்ட் டெஸ்டிங் லைப்ரரி: உலகளாவிய அணிகளுக்கான காம்பொனென்ட் டெஸ்டிங்கின் சிறந்த நடைமுறைகள்

தொடர்ந்து மாறிவரும் இணைய மேம்பாட்டு உலகில், உங்கள் ரியாக்ட் பயன்பாடுகளின் நம்பகத்தன்மை மற்றும் தரத்தை உறுதி செய்வது மிக முக்கியமானது. இது குறிப்பாக, பல்வேறு பயனர் தளங்கள் மற்றும் அணுகல்தன்மை தேவைகளைக் கொண்ட திட்டங்களில் பணிபுரியும் உலகளாவிய அணிகளுக்கு உண்மையாகும். ரியாக்ட் டெஸ்டிங் லைப்ரரி (RTL) காம்பொனென்ட் டெஸ்டிங்கிற்கு ஒரு சக்திவாய்ந்த மற்றும் பயனர்-மைய அணுகுமுறையை வழங்குகிறது. செயல்படுத்துதல் விவரங்களில் கவனம் செலுத்தும் பாரம்பரிய சோதனை முறைகளைப் போலல்லாமல், RTL உங்கள் காம்பொனென்ட்களை ஒரு பயனர் அவற்றுடன் எவ்வாறு தொடர்புகொள்வார் என்பதைப் போலவே சோதிக்க உங்களை ஊக்குவிக்கிறது, இது மிகவும் வலுவான மற்றும் பராமரிக்கக்கூடிய சோதனைகளுக்கு வழிவகுக்கிறது. இந்த விரிவான வழிகாட்டி, உலகளாவிய பார்வையாளர்களுக்கு ஏற்ற பயன்பாடுகளை உருவாக்குவதில் கவனம் செலுத்தி, உங்கள் ரியாக்ட் திட்டங்களில் RTL-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகளை ஆராயும்.

ஏன் ரியாக்ட் டெஸ்டிங் லைப்ரரி?

சிறந்த நடைமுறைகளுக்குள் செல்வதற்கு முன், மற்ற சோதனை லைப்ரரிகளிலிருந்து RTL ஏன் தனித்து நிற்கிறது என்பதைப் புரிந்துகொள்வது அவசியம். இங்கே சில முக்கிய நன்மைகள்:

• பயனர்-மைய அணுகுமுறை: RTL பயனரின் கண்ணோட்டத்தில் இருந்து காம்பொனென்ட்களை சோதிப்பதற்கு முன்னுரிமை அளிக்கிறது. ஒரு பயனர் பயன்படுத்தும் அதே முறைகளைப் பயன்படுத்தி (எ.கா., பொத்தான்களைக் கிளிக் செய்தல், உள்ளீட்டுப் புலங்களில் தட்டச்சு செய்தல்) நீங்கள் காம்பொனென்ட்களுடன் தொடர்புகொள்கிறீர்கள், இது மிகவும் யதார்த்தமான மற்றும் நம்பகமான சோதனை அனுபவத்தை உறுதி செய்கிறது.
• அணுகல்தன்மையில் கவனம்: RTL, குறைபாடுகள் உள்ள பயனர்களைக் கருத்தில் கொண்டு அவற்றைச் சோதிக்க உங்களை ஊக்குவிப்பதன் மூலம் அணுகக்கூடிய காம்பொனென்ட்களை எழுத ஊக்குவிக்கிறது. இது WCAG போன்ற உலகளாவிய அணுகல்தன்மை தரங்களுடன் ஒத்துப்போகிறது.
• குறைக்கப்பட்ட பராமரிப்பு: செயல்படுத்துதல் விவரங்களை (எ.கா., அக நிலை, குறிப்பிட்ட செயல்பாட்டு அழைப்புகள்) சோதிப்பதைத் தவிர்ப்பதன் மூலம், உங்கள் குறியீட்டை நீங்கள் மறுசீரமைக்கும்போது RTL சோதனைகள் உடைந்து போவதற்கான வாய்ப்புகள் குறைவு. இது மேலும் பராமரிக்கக்கூடிய மற்றும் நெகிழ்வான சோதனைகளுக்கு வழிவகுக்கிறது.
• மேம்படுத்தப்பட்ட குறியீடு வடிவமைப்பு: RTL-இன் பயனர்-மைய அணுகுமுறை பெரும்பாலும் சிறந்த காம்பொனென்ட் வடிவமைப்பிற்கு வழிவகுக்கிறது, ஏனெனில் பயனர்கள் உங்கள் காம்பொனென்ட்களுடன் எவ்வாறு தொடர்புகொள்வார்கள் என்பதைப் பற்றி நீங்கள் சிந்திக்க வேண்டிய கட்டாயத்தில் உள்ளீர்கள்.
• சமூகம் மற்றும் சூழலமைப்பு: RTL ஒரு பெரிய மற்றும் சுறுசுறுப்பான சமூகத்தைக் கொண்டுள்ளது, இது ஏராளமான வளங்கள், ஆதரவு மற்றும் நீட்டிப்புகளை வழங்குகிறது.

உங்கள் சோதனைச் சூழலை அமைத்தல்

RTL உடன் தொடங்குவதற்கு, உங்கள் சோதனைச் சூழலை அமைக்க வேண்டும். இங்கே கிரியேட் ரியாக்ட் ஆப் (CRA) பயன்படுத்திய ஒரு அடிப்படை அமைப்பு உள்ளது, இது Jest மற்றும் RTL உடன் முன்பே உள்ளமைக்கப்பட்டுள்ளது:

npx create-react-app my-react-app
cd my-react-app
npm install --save-dev @testing-library/react @testing-library/jest-dom

விளக்கம்:

• `npx create-react-app my-react-app`: கிரியேட் ரியாக்ட் ஆப் பயன்படுத்தி ஒரு புதிய ரியாக்ட் ப்ராஜெக்ட்டை உருவாக்குகிறது.
• `cd my-react-app`: புதிதாக உருவாக்கப்பட்ட ப்ராஜெக்ட் டைரக்டரிக்குள் செல்கிறது.
• `npm install --save-dev @testing-library/react @testing-library/jest-dom`: தேவையான RTL பேக்கேஜ்களை டெவலப்மென்ட் டிபென்டன்சிகளாக நிறுவுகிறது. `@testing-library/react` முக்கிய RTL செயல்பாட்டை வழங்குகிறது, அதே நேரத்தில் `@testing-library/jest-dom` DOM உடன் வேலை செய்வதற்கு பயனுள்ள Jest மேட்சர்களை வழங்குகிறது.

நீங்கள் CRA பயன்படுத்தவில்லை என்றால், நீங்கள் Jest மற்றும் RTL-ஐ தனித்தனியாக நிறுவி, RTL-ஐப் பயன்படுத்த Jest-ஐ உள்ளமைக்க வேண்டும்.

ரியாக்ட் டெஸ்டிங் லைப்ரரியுடன் காம்பொனென்ட் டெஸ்டிங்கிற்கான சிறந்த நடைமுறைகள்

1. பயனர் தொடர்புகளைப் பிரதிபலிக்கும் சோதனைகளை எழுதுங்கள்

RTL-இன் முக்கிய கொள்கை, ஒரு பயனர் செய்வது போலவே காம்பொனென்ட்களைச் சோதிப்பதாகும். இதன் பொருள், அகச் செயல்பாட்டு விவரங்களைக் காட்டிலும், பயனர் என்ன பார்க்கிறார், என்ன செய்கிறார் என்பதில் கவனம் செலுத்துவதாகும். கூறுகளின் டெக்ஸ்ட், ரோல் அல்லது அணுகல்தன்மை லேபிள்களின் அடிப்படையில் அவற்றைக் கண்டறிய RTL வழங்கும் `screen` ஆப்ஜெக்டைப் பயன்படுத்தவும்.

எடுத்துக்காட்டு: ஒரு பட்டன் கிளிக்கினைச் சோதித்தல்

உங்களிடம் ஒரு எளிய பட்டன் காம்பொனென்ட் இருப்பதாக வைத்துக்கொள்வோம்:

// Button.js
import React from 'react';

function Button({ onClick, children }) {
  return {children};
}

export default Button;

RTL-ஐப் பயன்படுத்தி அதை எவ்வாறு சோதிப்பது என்பது இங்கே:

// Button.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button Component', () => {
  it('calls the onClick handler when clicked', () => {
    const handleClick = jest.fn();
    render(Click Me);

    const buttonElement = screen.getByText('Click Me');
    fireEvent.click(buttonElement);

    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

விளக்கம்:

• `render(Click Me)`: பட்டன் காம்பொனென்ட்டை ஒரு மாக் `onClick` ஹேண்ட்லருடன் ரெண்டர் செய்கிறது.
• `screen.getByText('Click Me')`: "Click Me" என்ற உரையைக் கொண்ட ஒரு எலிமென்ட்டிற்காக டாக்குமென்ட்டை வினவுகிறது. இப்படித்தான் ஒரு பயனர் பட்டனை அடையாளம் காண்பார்.
• `fireEvent.click(buttonElement)`: பட்டன் எலிமென்ட்டில் ஒரு கிளிக் நிகழ்வை உருவகப்படுத்துகிறது.
• `expect(handleClick).toHaveBeenCalledTimes(1)`: `onClick` ஹேண்ட்லர் ஒரு முறை அழைக்கப்பட்டது என்பதை உறுதிசெய்கிறது.

செயல்படுத்துதல் விவரங்களைச் சோதிப்பதை விட இது ஏன் சிறந்தது: நீங்கள் பட்டன் காம்பொனென்ட்டை வேறு ஒரு நிகழ்வு ஹேண்ட்லரைப் பயன்படுத்த அல்லது அக நிலையை மாற்ற மறுசீரமைப்பதாக கற்பனை செய்து பாருங்கள். நீங்கள் குறிப்பிட்ட நிகழ்வு ஹேண்ட்லர் செயல்பாட்டைச் சோதித்திருந்தால், உங்கள் சோதனை தோல்வியடையும். பயனர் தொடர்பில் (பட்டனைக் கிளிக் செய்வது) கவனம் செலுத்துவதன் மூலம், மறுசீரமைப்புக்குப் பிறகும் சோதனை செல்லுபடியாகும்.

2. பயனர் நோக்கத்தின் அடிப்படையில் வினவல்களுக்கு முன்னுரிமை கொடுங்கள்

RTL எலிமென்ட்களைக் கண்டறிய வெவ்வேறு வினவல் முறைகளை வழங்குகிறது. பின்வரும் வினவல்களுக்கு இந்த வரிசையில் முன்னுரிமை கொடுங்கள், ஏனெனில் பயனர்கள் உங்கள் காம்பொனென்ட்களை எவ்வாறு உணர்ந்து அவற்றுடன் தொடர்பு கொள்கிறார்கள் என்பதை இவை சிறப்பாகப் பிரதிபலிக்கின்றன:

• getByRole: இந்த வினவல் மிகவும் அணுகக்கூடியது மற்றும் உங்கள் முதல் தேர்வாக இருக்க வேண்டும். இது ARIA ரோல்களின் (எ.கா., பட்டன், இணைப்பு, தலைப்பு) அடிப்படையில் எலிமென்ட்களைக் கண்டறிய உங்களை அனுமதிக்கிறது.
• getByLabelText: உள்ளீட்டுப் புலங்கள் போன்ற ஒரு குறிப்பிட்ட லேபிளுடன் தொடர்புடைய எலிமென்ட்களைக் கண்டறிய இதைப் பயன்படுத்தவும்.
• getByPlaceholderText: உள்ளீட்டுப் புலங்களை அவற்றின் ப்ளேஸ்ஹோல்டர் உரையின் அடிப்படையில் கண்டறிய இதைப் பயன்படுத்தவும்.
• getByText: எலிமென்ட்களை அவற்றின் உரை உள்ளடக்கத்தின் அடிப்படையில் கண்டறிய இதைப் பயன்படுத்தவும். குறிப்பாக இருங்கள் மற்றும் பல இடங்களில் தோன்றக்கூடிய பொதுவான உரையைப் பயன்படுத்துவதைத் தவிர்க்கவும்.
• getByDisplayValue: உள்ளீட்டுப் புலங்களை அவற்றின் தற்போதைய மதிப்பின் அடிப்படையில் கண்டறிய இதைப் பயன்படுத்தவும்.

எடுத்துக்காட்டு: ஒரு படிவ உள்ளீட்டைச் சோதித்தல்

// Input.js
import React from 'react';

function Input({ label, placeholder, value, onChange }) {
  return (
    

      {label}
      
    
  );
}

export default Input;

பரிந்துரைக்கப்பட்ட வினவல் வரிசையைப் பயன்படுத்தி அதை எவ்வாறு சோதிப்பது என்பது இங்கே:

// Input.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Input from './Input';

describe('Input Component', () => {
  it('updates the value when the user types', () => {
    const handleChange = jest.fn();
    render();

    const inputElement = screen.getByLabelText('Name');
    fireEvent.change(inputElement, { target: { value: 'John Doe' } });

    expect(handleChange).toHaveBeenCalledTimes(1);
    expect(handleChange).toHaveBeenCalledWith(expect.objectContaining({ target: { value: 'John Doe' } }));
  });
});

விளக்கம்:

• `screen.getByLabelText('Name')`: "Name" என்ற லேபிளுடன் தொடர்புடைய உள்ளீட்டுப் புலத்தைக் கண்டறிய `getByLabelText`-ஐப் பயன்படுத்துகிறது. இது உள்ளீட்டைக் கண்டறிய மிகவும் அணுகக்கூடிய மற்றும் பயனர் நட்பு வழியாகும்.

3. செயல்படுத்துதல் விவரங்களைச் சோதிப்பதைத் தவிர்க்கவும்

முன்பு குறிப்பிட்டபடி, அக நிலை, செயல்பாட்டு அழைப்புகள் அல்லது குறிப்பிட்ட CSS கிளாஸ்களைச் சோதிப்பதைத் தவிர்க்கவும். இவை மாற்றத்திற்கு உள்ளாகக்கூடிய மற்றும் எளிதில் உடையக்கூடிய சோதனைகளுக்கு வழிவகுக்கும் செயல்படுத்துதல் விவரங்கள் ஆகும். காம்பொனென்டின் கவனிக்கக்கூடிய நடத்தையில் கவனம் செலுத்துங்கள்.

எடுத்துக்காட்டு: நிலையை நேரடியாகச் சோதிப்பதைத் தவிர்க்கவும்

ஒரு குறிப்பிட்ட நிலை மாறி புதுப்பிக்கப்பட்டதா என்பதைச் சோதிப்பதற்குப் பதிலாக, அந்த நிலையின் அடிப்படையில் காம்பொனென்ட் சரியான வெளியீட்டை வழங்குகிறதா எனச் சோதிக்கவும். எடுத்துக்காட்டாக, ஒரு காம்பொனென்ட் பூலியன் நிலை மாறியின் அடிப்படையில் ஒரு செய்தியைக் காட்டினால், நிலை மாறியைச் சோதிப்பதற்குப் பதிலாக, செய்தி காட்டப்படுகிறதா அல்லது மறைக்கப்படுகிறதா என்பதைச் சோதிக்கவும்.

4. குறிப்பிட்ட நிகழ்வுகளுக்கு `data-testid`-ஐப் பயன்படுத்தவும்

பொதுவாக `data-testid` பண்புக்கூறுகளைப் பயன்படுத்துவதைத் தவிர்ப்பது நல்லது என்றாலும், அவை பயனுள்ளதாக இருக்கும் குறிப்பிட்ட சில நிகழ்வுகள் உள்ளன:

• சொற்பொருள் அர்த்தம் இல்லாத கூறுகள்: அர்த்தமுள்ள ரோல், லேபிள் அல்லது உரை இல்லாத ஒரு உறுப்பை நீங்கள் குறிவைக்க வேண்டும் என்றால், `data-testid`-ஐப் பயன்படுத்தலாம்.
• சிக்கலான காம்பொனென்ட் கட்டமைப்புகள்: சிக்கலான காம்பொனென்ட் கட்டமைப்புகளில், `data-testid` எளிதில் உடையக்கூடிய தேர்வுகளை நம்பாமல் குறிப்பிட்ட கூறுகளை குறிவைக்க உங்களுக்கு உதவும்.
• அணுகல்தன்மை சோதனை: சைப்ரஸ் அல்லது ப்ளேரைட் போன்ற கருவிகளுடன் அணுகல்தன்மை சோதனையின் போது குறிப்பிட்ட கூறுகளை அடையாளம் காண `data-testid` பயன்படுத்தப்படலாம்.

எடுத்துக்காட்டு: `data-testid`-ஐப் பயன்படுத்துதல்

// MyComponent.js
import React from 'react';

function MyComponent() {
  return (
    

      
This is my component.
    
  );
}

export default MyComponent;

// MyComponent.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders the component container', () => {
    render();
    const containerElement = screen.getByTestId('my-component-container');
    expect(containerElement).toBeInTheDocument();
  });
});

முக்கியம்: `data-testid`-ஐ குறைவாகவும் மற்ற வினவல் முறைகள் பொருத்தமற்றதாக இருக்கும்போது மட்டுமே பயன்படுத்தவும்.

5. அர்த்தமுள்ள சோதனை விளக்கங்களை எழுதுங்கள்

ஒவ்வொரு சோதனையின் நோக்கத்தைப் புரிந்துகொள்வதற்கும் தோல்விகளை பிழைதிருத்தம் செய்வதற்கும் தெளிவான மற்றும் சுருக்கமான சோதனை விளக்கங்கள் மிக முக்கியமானவை. சோதனை என்ன சரிபார்க்கிறது என்பதை தெளிவாக விளக்கும் விளக்கமான பெயர்களைப் பயன்படுத்தவும்.

எடுத்துக்காட்டு: நல்ல மற்றும் கெட்ட சோதனை விளக்கங்கள்

கெட்டது: `it('works')`

நல்லது: `it('சரியான வாழ்த்துச் செய்தியைக் காட்டுகிறது')`

இன்னும் சிறந்தது: `it('பெயர் ப்ராப் வழங்கப்படாதபோது \"Hello, World!\" என்ற வாழ்த்துச் செய்தியைக் காட்டுகிறது')`

சிறந்த எடுத்துக்காட்டு, குறிப்பிட்ட நிபந்தனைகளின் கீழ் காம்பொனென்டின் எதிர்பார்க்கப்படும் நடத்தையை தெளிவாகக் கூறுகிறது.

6. உங்கள் சோதனைகளை சிறியதாகவும் கவனம் செலுத்தியதாகவும் வைத்திருங்கள்

ஒவ்வொரு சோதனையும் காம்பொனென்டின் நடத்தையின் ஒரு அம்சத்தைச் சரிபார்ப்பதில் கவனம் செலுத்த வேண்டும். பல சூழ்நிலைகளை உள்ளடக்கிய பெரிய, சிக்கலான சோதனைகளை எழுதுவதைத் தவிர்க்கவும். சிறிய, கவனம் செலுத்திய சோதனைகளைப் புரிந்துகொள்வது, பராமரிப்பது மற்றும் பிழைதிருத்தம் செய்வது எளிது.

7. டெஸ்ட் டபிள்களை (மாக்குகள் மற்றும் ஸ்பைகள்) சரியான முறையில் பயன்படுத்தவும்

நீங்கள் சோதிக்கும் காம்பொனென்டை அதன் சார்புகளிலிருந்து தனிமைப்படுத்த டெஸ்ட் டபிள்கள் பயனுள்ளதாக இருக்கும். வெளிப்புற சேவைகள், API அழைப்புகள் அல்லது பிற காம்பொனென்ட்களை உருவகப்படுத்த மாக்குகள் மற்றும் ஸ்பைகளைப் பயன்படுத்தவும்.

எடுத்துக்காட்டு: ஒரு API அழைப்பை மாக்கிங் செய்தல்

// UserList.js
import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    async function fetchUsers() {
      const response = await fetch('/api/users');
      const data = await response.json();
      setUsers(data);
    }

    fetchUsers();
  }, []);

  return (
    

      {users.map(user => (
        
{user.name}
      ))}
    
  );
}

export default UserList;

// UserList.test.js
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import UserList from './UserList';

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve([
      { id: 1, name: 'John Doe' },
      { id: 2, name: 'Jane Smith' },
    ]),
  })
);

describe('UserList Component', () => {
  it('fetches and displays a list of users', async () => {
    render();

    // Wait for the data to load
    await waitFor(() => screen.getByText('John Doe'));

    expect(screen.getByText('John Doe')).toBeInTheDocument();
    expect(screen.getByText('Jane Smith')).toBeInTheDocument();
  });
});

விளக்கம்:

• `global.fetch = jest.fn(...)`: முன்வரையறுக்கப்பட்ட பயனர்களின் பட்டியலைத் திருப்பித் தர `fetch` செயல்பாட்டை மாக் செய்கிறது. இது உண்மையான API எண்ட்பாயிண்ட்டை நம்பாமல் காம்பொனென்டைச் சோதிக்க உங்களை அனுமதிக்கிறது.
• `await waitFor(() => screen.getByText('John Doe'))`: "John Doe" உரை டாக்குமென்டில் தோன்றும் வரை காத்திருக்கிறது. தரவு ஒத்திசைவற்ற முறையில் பெறப்படுவதால் இது அவசியம்.

8. எட்ஜ் கேஸ்கள் மற்றும் பிழை கையாளுதலைச் சோதிக்கவும்

வெற்றிகரமான பாதையை மட்டும் சோதிக்க வேண்டாம். எட்ஜ் கேஸ்கள், பிழை சூழ்நிலைகள் மற்றும் எல்லை நிபந்தனைகளைச் சோதிப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். இது சாத்தியமான சிக்கல்களை ஆரம்பத்திலேயே கண்டறியவும், உங்கள் காம்பொனென்ட் எதிர்பாராத சூழ்நிலைகளை நேர்த்தியாகக் கையாள்வதை உறுதி செய்யவும் உதவும்.

எடுத்துக்காட்டு: பிழை கையாளுதலைச் சோதித்தல்

ஒரு API-யிலிருந்து தரவைப் பெற்று, API அழைப்பு தோல்வியுற்றால் பிழைச் செய்தியைக் காட்டும் ஒரு காம்பொனென்டை கற்பனை செய்து பாருங்கள். API அழைப்பு தோல்வியுற்றால் பிழைச் செய்தி சரியாகக் காட்டப்படுகிறதா என்பதைச் சரிபார்க்க நீங்கள் ஒரு சோதனை எழுத வேண்டும்.

9. அணுகல்தன்மையில் கவனம் செலுத்துங்கள்

உள்ளடக்கிய இணையப் பயன்பாடுகளை உருவாக்குவதில் அணுகல்தன்மை மிக முக்கியமானது. உங்கள் காம்பொனென்ட்களின் அணுகல்தன்மையைச் சோதித்து, அவை WCAG போன்ற அணுகல்தன்மை தரங்களைப் பூர்த்தி செய்வதை உறுதிசெய்ய RTL-ஐப் பயன்படுத்தவும். சில முக்கிய அணுகல்தன்மை கருத்தாய்வுகள் பின்வருமாறு:

• சொற்பொருள் HTML: உங்கள் உள்ளடக்கத்திற்கு கட்டமைப்பையும் அர்த்தத்தையும் வழங்க சொற்பொருள் HTML கூறுகளைப் (``, `
• ARIA பண்புக்கூறுகள்: குறிப்பாக தனிப்பயன் காம்பொனென்ட்களுக்கு, கூறுகளின் ரோல், நிலை மற்றும் பண்புகள் பற்றிய கூடுதல் தகவல்களை வழங்க ARIA பண்புக்கூறுகளைப் பயன்படுத்தவும்.
• விசைப்பலகை வழிசெலுத்தல்: அனைத்து ஊடாடும் கூறுகளும் விசைப்பலகை வழிசெலுத்தல் வழியாக அணுகக்கூடியவை என்பதை உறுதிப்படுத்தவும்.
• வண்ண வேறுபாடு: குறைந்த பார்வை உள்ள பயனர்களுக்கு உரை படிக்கக்கூடியதாக இருப்பதை உறுதிசெய்ய போதுமான வண்ண வேறுபாட்டைப் பயன்படுத்தவும்.
• ஸ்கிரீன் ரீடர் இணக்கத்தன்மை: பார்வை குறைபாடு உள்ள பயனர்களுக்கு அர்த்தமுள்ள மற்றும் புரிந்துகொள்ளக்கூடிய அனுபவத்தை வழங்குவதை உறுதிசெய்ய உங்கள் காம்பொனென்ட்களை ஸ்கிரீன் ரீடர் மூலம் சோதிக்கவும்.

எடுத்துக்காட்டு: `getByRole` உடன் அணுகல்தன்மையைச் சோதித்தல்

// MyAccessibleComponent.js
import React from 'react';

function MyAccessibleComponent() {
  return (
    X
  );
}

export default MyAccessibleComponent;

// MyAccessibleComponent.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import MyAccessibleComponent from './MyAccessibleComponent';

describe('MyAccessibleComponent', () => {
  it('renders an accessible button with the correct aria-label', () => {
    render();
    const buttonElement = screen.getByRole('button', { name: 'Close' });
    expect(buttonElement).toBeInTheDocument();
  });
});

விளக்கம்:

• `screen.getByRole('button', { name: 'Close' })`: "Close" என்ற அணுகக்கூடிய பெயருடன் ஒரு பட்டன் உறுப்பைக் கண்டுபிடிக்க `getByRole`-ஐப் பயன்படுத்துகிறது. இது பட்டன் ஸ்கிரீன் ரீடர்களுக்கு சரியாக லேபிளிடப்பட்டிருப்பதை உறுதி செய்கிறது.

10. உங்கள் மேம்பாட்டுப் பணிப்பாய்வில் சோதனையை ஒருங்கிணைக்கவும்

சோதனை என்பது உங்கள் மேம்பாட்டுப் பணிப்பாய்வின் ஒரு ஒருங்கிணைந்த பகுதியாக இருக்க வேண்டும், ஒரு பின்தொடர்வாக அல்ல. குறியீடு கமிட் செய்யப்படும்போதோ அல்லது வரிசைப்படுத்தப்படும்போதோ சோதனைகளைத் தானாக இயக்க உங்கள் CI/CD பைப்லைனில் உங்கள் சோதனைகளை ஒருங்கிணைக்கவும். இது பிழைகளை ஆரம்பத்திலேயே பிடிக்கவும், பின்னடைவுகளைத் தடுக்கவும் உதவும்.

11. உள்ளூர்மயமாக்கல் மற்றும் பன்னாட்டுமயமாக்கலை (i18n) கருத்தில் கொள்ளுங்கள்

உலகளாவிய பயன்பாடுகளுக்கு, சோதனையின் போது உள்ளூர்மயமாக்கல் மற்றும் பன்னாட்டுமயமாக்கலை (i18n) கருத்தில் கொள்வது மிக முக்கியம். உங்கள் காம்பொனென்ட்கள் வெவ்வேறு மொழிகளிலும் வட்டாரங்களிலும் சரியாக ரெண்டர் செய்யப்படுவதை உறுதிப்படுத்திக் கொள்ளுங்கள்.

எடுத்துக்காட்டு: உள்ளூர்மயமாக்கலைச் சோதித்தல்

உள்ளூர்மயமாக்கலுக்கு `react-intl` அல்லது `i18next` போன்ற ஒரு லைப்ரரியைப் பயன்படுத்துகிறீர்கள் என்றால், உங்கள் காம்பொனென்ட்கள் சரியான மொழிபெயர்க்கப்பட்ட உரையைக் காட்டுகின்றனவா என்பதைச் சரிபார்க்க உங்கள் சோதனைகளில் உள்ளூர்மயமாக்கல் சூழலை மாக் செய்யலாம்.

12. மீண்டும் பயன்படுத்தக்கூடிய அமைப்பிற்கு தனிப்பயன் ரெண்டர் செயல்பாடுகளைப் பயன்படுத்தவும்

பெரிய திட்டங்களில் பணிபுரியும்போது, பல சோதனைகளில் ஒரே அமைப்புப் படிகளை மீண்டும் மீண்டும் செய்வதைக் காணலாம். நகலெடுப்பதைத் தவிர்க்க, பொதுவான அமைப்பு தர்க்கத்தை உள்ளடக்கிய தனிப்பயன் ரெண்டர் செயல்பாடுகளை உருவாக்கவும்.

எடுத்துக்காட்டு: தனிப்பயன் ரெண்டர் செயல்பாடு

// test-utils.js
import React from 'react';
import { render } from '@testing-library/react';
import { ThemeProvider } from 'styled-components';
import theme from './theme';

const AllTheProviders = ({ children }) => {
  return (
    
      {children}
    
  );
}

const customRender = (ui, options) =>
  render(ui, { wrapper: AllTheProviders, ...options })

// re-export everything
export * from '@testing-library/react'

// override render method
export { customRender as render }

// MyComponent.test.js
import React from 'react';
import { render, screen } from './test-utils'; // Import the custom render
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly with the theme', () => {
    render();
    // Your test logic here
  });
});

இந்த எடுத்துக்காட்டு, காம்பொனென்ட்டை ThemeProvider உடன் போர்த்தும் ஒரு தனிப்பயன் ரெண்டர் செயல்பாட்டை உருவாக்குகிறது. இது ஒவ்வொரு சோதனையிலும் ThemeProvider அமைப்பை மீண்டும் செய்யாமல் தீமை நம்பியிருக்கும் காம்பொனென்ட்களை எளிதாகச் சோதிக்க உங்களை அனுமதிக்கிறது.

முடிவுரை

ரியாக்ட் டெஸ்டிங் லைப்ரரி காம்பொனென்ட் டெஸ்டிங்கிற்கு ஒரு சக்திவாய்ந்த மற்றும் பயனர்-மைய அணுகுமுறையை வழங்குகிறது. இந்த சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், பயனர் நடத்தை மற்றும் அணுகல்தன்மையில் கவனம் செலுத்தும் பராமரிக்கக்கூடிய, பயனுள்ள சோதனைகளை நீங்கள் எழுதலாம். இது உலகளாவிய பார்வையாளர்களுக்காக மேலும் வலுவான, நம்பகமான மற்றும் உள்ளடக்கிய ரியாக்ட் பயன்பாடுகளுக்கு வழிவகுக்கும். பயனர் தொடர்புகளுக்கு முன்னுரிமை அளிக்கவும், செயல்படுத்துதல் விவரங்களைச் சோதிப்பதைத் தவிர்க்கவும், அணுகல்தன்மையில் கவனம் செலுத்தவும், உங்கள் மேம்பாட்டுப் பணிப்பாய்வில் சோதனையை ஒருங்கிணைக்கவும் நினைவில் கொள்ளுங்கள். இந்த கொள்கைகளை ஏற்றுக்கொள்வதன் மூலம், உலகெங்கிலும் உள்ள பயனர்களின் தேவைகளைப் பூர்த்தி செய்யும் உயர்தர ரியாக்ட் பயன்பாடுகளை நீங்கள் உருவாக்கலாம்.

முக்கிய குறிப்புகள்:

• பயனர் தொடர்புகளில் கவனம் செலுத்துங்கள்: ஒரு பயனர் அவற்றுடன் தொடர்புகொள்வது போலவே காம்பொனென்ட்களைச் சோதிக்கவும்.
• அணுகல்தன்மைக்கு முன்னுரிமை அளியுங்கள்: உங்கள் காம்பொனென்ட்கள் குறைபாடுகள் உள்ள பயனர்களுக்கு அணுகக்கூடியவை என்பதை உறுதிப்படுத்தவும்.
• செயல்படுத்துதல் விவரங்களைத் தவிர்க்கவும்: அக நிலை அல்லது செயல்பாட்டு அழைப்புகளைச் சோதிக்க வேண்டாம்.
• தெளிவான மற்றும் சுருக்கமான சோதனைகளை எழுதுங்கள்: உங்கள் சோதனைகளைப் புரிந்துகொள்வதற்கும் பராமரிப்பதற்கும் எளிதாக்குங்கள்.
• உங்கள் பணிப்பாய்வில் சோதனையை ஒருங்கிணைக்கவும்: உங்கள் சோதனைகளைத் தானியக்கமாக்கி அவற்றை தவறாமல் இயக்கவும்.
• உலகளாவிய பார்வையாளர்களைக் கருத்தில் கொள்ளுங்கள்: உங்கள் காம்பொனென்ட்கள் வெவ்வேறு மொழிகளிலும் வட்டாரங்களிலும் நன்றாகச் செயல்படுவதை உறுதிப்படுத்தவும்.